<template>
	<view class="content">
		<!-- 项目基本信息 -->
		<view class="box">
			<view class="cu-list menu margin-top" >
				<!-- 不会超出的选项 -->
				<view class="cu-item" @tap="toMoney(i,j)" :class="{arrow:i.isRight}" v-for="(i,j) in contract" :key="j">
					<view class="content">
						<!-- <text v-if="i.icon" :class="'cuIcon-'+i.icon" :style="[{color:i.iconColor},{fontWeight:800}]"></text> -->
						<text style="width: 160rpx;display: inline-block;">{{i.title}}</text>
					</view>
					<view class="action" :style="[{color:i.color}]">
						<text>{{i.value}}</text>
					</view>
				</view>
				
				<!-- 工程人员 -->
				<view class="cu-item" @click="isLookMember=!isLookMember">
					<view class="content">
						<!-- <text v-if="i.icon" :class="'cuIcon-'+i.icon" :style="[{color:i.iconColor},{fontWeight:800}]"></text> -->
						<text >工程人员</text>
					</view>
					<view class="action" :style="[{color:i.color}]">
						<text>{{memberNum}}人</text>
						<text :class="!isLookMember?'cuIcon-right':'cuIcon-unfold'"></text>
					</view>
				</view>
				<template v-if="isLookMember">
					<view class="person-item" v-for="(i,j) in part.orderServiceUser" :key="j">
						<view>
							<text class="cuIcon-title" :style="[{color:i.status==0?'#e54d42':'#39b54a'}]"></text>
							<image v-if="i.user.user_img" :src="i.user.user_img" mode=""></image>
							<image v-else src="../../../../static/work.png" mode=""></image>
							<text v-if="i.user.realname">{{i.user.realname}}</text>
							<text v-else>未实名</text>
						</view>
						<view class="person-item-phone" @tap="toCall(i.user.phone)">
							<text>{{i.user.phone||"无联系方式"}}</text>
							<!-- <text class="cuIcon-right"></text> -->
						</view>
					</view>
				</template>
				
				<!-- 可能超出的选项 -->
				<view class="part_item">
					<view class="part_head">
						<text class="cuIcon-text" style="color: #ffa23e; margin-right: 10rpx;"></text>
						<text>工作内容:</text>
					</view>
					<view class="part_content">
						<text class="cuIcon-title"></text>
						<text>{{part.title}}</text>
					</view>
				</view>
			</view>
			<!-- 完成 -->
			<view class="footer">
				<view class="button no_click" @click="toSuccess()" v-if="status==0">
					<view>
						<text>完成</text>
					</view>
				</view>
				<view class="button no_click" style="opacity: 0.5;"  v-if="status==1">
					<view>
						<text>已提交</text>
					</view>
				</view>
				<!-- 取消 -->
				<view class="button">
					<view style="background-color: #e54d42;opacity: 0.5;">
						<text style="background-color: #e54d42;">取消</text>
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import api from "../../../../network/index.js"
	export default {
		data() {
			return {
				id: 0,
				contract:{},
				part:{},
				memberNum: 0,
				isLookMember: false,
				status: 0, // 施工人员状态0为未完成，1为已提交申请完成
			};
		},
		methods:{
			// 打电话
			toCall(i){
				uni.makePhoneCall({phoneNumber: i})
			},
			// 结算费用
			toMoney(i,j){
				const t = this
				console.log(t.id)
				if(j == "part_num"){
					// console.log(i.title)
					if(i.title == "工具零件"){
						uni.navigateTo({
							url: "../taskmoney/taskmoney?id="+t.id
						})
					} else if(i.title == "转借配件"){
						uni.navigateTo({
							url: "../taskrent/taskrent?id="+t.id
						})
					}
				}
			},
			// 判断状态
			getStatus(status){
				if(status==1)return {value:"已结束",color: "#39b54a"}
				// if(status==1)return {value:"施工中",color: "#ffa23e"}
				if(status==0)return {value:"进行中",color: "#ffa23e"}
			},
			// 获取项目详情
			getDetail(id){
				const t = this
				api.request({
					url: api.SERVICE_LIST,
					data:{
						id: "=,"+id
					}
				}).then(res=>{
					// console.log(res)
					if(res.data.code == "200"){
						// 合同详情页面需要展示的数据
						// 工作类型,工作地点,维保服务费用,工作时间,状态,组员详情
						let data = res.data.list.data[0]
						// console.log(data)
						let status = t.getStatus(data.status)
						let obj = {
							name: {
								title: "工作类型",
								value: data.orderServiceType.title,
								icon: "home",
								iconColor: "#ffa23e",
								color: "#000000",
								isRight: false,
							},
							address: {
								title: "工作地点",
								value: data.address,
							 	icon: "home",
								iconColor: "#ffa23e",
								color: "#aaaaaa",
								isRight: false,
							},
							device: {
								title: "主机",
								value: data.device.device_name,
								icon: "home",
								iconColor: "#ffa23e",
								color: "#aaaaaa",
								isRight: false,
							},
							num: {
								title: "维保服务费",
								value: "￥"+data.service_fee||0,
								icon: "home",
								iconColor: "#ffa23e",
								color: "#e54d42",
								isRight: false,
							},
							time: {
								title: "发布时间",
								value: data.create_time,
								icon: "home",
								iconColor: "#ffa23e",
								color: "#aaaaaa",
								isRight: false,
							},
							
							status: {
								title: "状态",
								value: status.value,
								icon: "home",
								iconColor: status.color,
								color: status.color,
								isRight: false,
							},
							part_num: {
								title: data.order_service_type_id == "603"?'转借配件':"工具零件",
								value: "查看",
								icon: "home",
								iconColor: "#ffa23e",
								color: "#aaaaaa",
								isRight: true,
							},
							// member: {
							// 	title: "工程人员",
							// 	value: data.orderServiceUser.length+"人",
							// 	icon: "home",
							// 	iconColor: "#ffa23e",
							// 	color: "#555555",
							// 	isRight: false,
							// },
						}
						this.contract = obj
						// 超出部分
						this.part.title = data.title
						this.part.orderServiceUser = data.orderServiceUser
						this.memberNum = data.orderServiceUser.length
						// console.log(data)
						this.part.orderServiceUser.forEach(res=>{
							// console.log(res)
							if(res.user_id == this.$store.state.user.userInfo.id){
								t.status = res.status
							}
						})
					} else {
						api.error(res)
					}
				}).catch(err=>{
					api.error(err)
				})
			},
			toSuccess(){
				// 获取到自己的id
				let id=0;
				this.part.orderServiceUser.forEach(res=>{
					// console.log(res)
					if(res.user_id == this.$store.state.user.userInfo.id){
						id = res.id
					}
				})
				// 更改工程人员的状态
				api.request({
					url: api.SEREVICE_EDIT_MEMBER,
					data:{
						id: id,
						status: 1
					}
				}).then(res=>{
					// console.log(res)
					this.getDetail(this.id)
				}).catch(err=>api.error(err))
			}
		},
		onLoad(options) {
			// console.log(options)
			this.id = options.id
			this.getDetail(options.id)
		},
		onPullDownRefresh (){
			this.getDetail(this.id)
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		}
	}
</script>

<style lang="scss" scoped>
.footer{
	margin: 20rpx ;
	display: flex;
	.button{
		flex: 1;
		view{
			margin: 40rpx 80rpx;
			height: 66rpx;
			line-height: 66rpx;
			text-align: center;
			background-color: #39b54a;
			color: #FFFFFF;
			font-size: 28rpx;
			font-weight: 800;
			border-radius: 20rpx;
			box-shadow: 4rpx 4rpx 8rpx #EEEEEE;
		}
	}
	.no_click{
		// opacity: 0.5;
	}
}
.person-item{
	display: flex;
	justify-content: space-between;
	padding: 0 30rpx;
	font-size: 30rpx;
	height: 100rpx;
	line-height: 100rpx;
	border-bottom: 1rpx solid #EEEEEE;
	.person-item-phone{
		font-size: 28rpx;
		width: 200rpx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		color: #AAAAAA;
	}
	image{
		margin-right: 20rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		vertical-align: middle;
	}
}
.part_item{
	.part_head{
		// background-color: #F5F5F5;
	}
	.part_head,.part_content{
		font-size: 28rpx;
		padding: 30rpx;
	}
	.cuIcon-title{
		margin-right: 20rpx;
	}
}
.box{
	margin: 0 20rpx;
	background-color: #FFFFFF;
	box-shadow: 4rpx 4rpx 8rpx #AAAAAA;
}
.action{
	font-size: 28rpx;
}
.cu-item{
	&:hover{
		background-color: #F5F5F5;
	}
	
}

</style>